<template>
  <a-drawer
    title="新增复试方案"
    width=800
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="planEditVisible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-row :gutter="48">
         <a-col :sm="{span:12}"  :md="{span:12}">
              <a-form-item label='院系'>
                <a-select :allowClear="true" showSearch :disabled="disabled" optionFilterProp="children" v-decorator="['zsyxm',{initialValue:postParams.zsyxm}]" @change="yxChange">
                      <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{i.dwh+'-'+ i.dwmc }}</a-select-option>
                    </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}"  :md="{span:12}">
              <a-form-item label='专业'>
              <a-select :allowClear="true" showSearch :disabled="disabled" optionFilterProp="children" v-decorator="['zszym',{initialValue:postParams.zszym}]">
                  <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{i.zyh+'-'+ i.zymc }}</a-select-option>
                </a-select>
              </a-form-item>
          </a-col>
          <a-col :sm="{span:12}"  :md="{span:12}">
            <a-form-item label='复试形式'>
            <a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['fsxs',{rules:[{required: true,message:'请选择复试形式'}],initialValue:postParams.zszym}]">
                <a-select-option value="01">线上</a-select-option>
                <a-select-option value="02">线下</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:24}"  :md="{span:24}">
            <a-form-item label="面试时间、地点">
              <div class="plan_title">
                <p><span style="color:red;">*</span>日期</p>
                <p><span style="color:red;">*</span>开始时间</p>
                <p><span style="color:red;">*</span>结束时间</p>
                <p><span style="color:red;">*</span>面试地点</p>
              </div>
              <div v-for="(item,index) in mssjList" :key="index" class="plan_item">
                  <a-date-picker class="plan_item_con1" v-model="item.date" allowClear/>
                  <a-time-picker class="plan_item_con1" v-model="item.startTime" placeholder="请选择开始时间" :open="item.starOpen" @openChange="handleOpenChange(item)"
                  :minute-step="15" :second-step="60" format="HH:mm" :default-open-value="defaultOpenValue" allowClear>
                    <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleClose(item)">
                      确定
                    </a-button>
                  </a-time-picker>
                  <a-time-picker class="plan_item_con1" v-model="item.endTime" placeholder="请选择结束时间" :open="item.endOpen" @openChange="handleOpenEnd(item)"
                  :minute-step="15" :second-step="60" format="HH:mm" :default-open-value="defaultOpenValue" allowClear>
                  <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleEndClose(item)">
                      确定
                    </a-button>
                  </a-time-picker>
                  <div class="plan_item_con">
                    <a-textarea  placeholder="请输入..." v-model="item.address" :rows="2"/>
                    <a-icon @click="mssjDel(index)" type="minus-circle" :style="{marginLeft:'10px',color: index == 0?'#dbdbdb':'#333'}"/>
                  </div>
              </div>
              <a-button type="link" size="small" @click="mssjAdd" style="display: flex;justify-content: center;margin: 0 auto;"><a-icon type="plus-circle" />添加面试时间、地点</a-button>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:24}"  :md="{span:24}">
            <a-form-item label="笔试时间、地点">
                <div class="plan_title">
                <p>日期</p>
                <p><span v-if="isShow" style="color:red;">*</span>开始时间</p>
                <p><span v-if="isShow" style="color:red;">*</span>结束时间</p>
                <p><span v-if="isShow" style="color:red;">*</span>笔试地点</p>
              </div>
              <div v-for="(item,index) in bssjList" :key="index" class="plan_item">
                  <a-date-picker class="plan_item_con1" v-model="item.date" @change="bsChange(item)" allowClear/>
                  <a-time-picker class="plan_item_con1" v-model="item.startTime" placeholder="请选择开始时间" :open="item.starOpen" @openChange="handleOpenChange(item)"
                  :minute-step="15" :second-step="60" format="HH:mm" :default-open-value="defaultOpenValue" allowClear>
                  <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleClose(item)">
                      确定
                    </a-button>
                  </a-time-picker>
                  <a-time-picker class="plan_item_con1" v-model="item.endTime" placeholder="请选择结束时间" :open="item.endOpen" @openChange="handleOpenEnd(item)"
                  :minute-step="15" :second-step="60" format="HH:mm" :default-open-value="defaultOpenValue" allowClear>
                  <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleEndClose(item)">
                      确定
                    </a-button>
                  </a-time-picker>
                  <div class="plan_item_con">
                    <a-textarea  placeholder="请输入..." v-model="item.address" :rows="2"/>
                    <a-icon @click="bssjDel(index)" type="minus-circle" :style="{marginLeft:'10px'}"/>
                  </div>
              </div>
              <a-button type="link" size="small" @click="bssjAdd" style="display: flex;justify-content: center;margin: 0 auto;"><a-icon type="plus-circle" />添加笔试时间、地点</a-button>
            </a-form-item>
          </a-col>
          
          <a-col :sm="{span:24}"  :md="{span:24}">
              <a-form-item label='专家组'>
                <div class="plan_title">
                  <p>组别</p>
                  <p>专家数</p>
                </div>
              <div v-for="(item,index) in zjzList" :key="index" class="plan_item">
                  <p class="plan_item_con">第{{index + 1}}组</p>
                  <div class="plan_item_con">
                    <a-input  placeholder="请输入..." v-model="item.total"/>
                    <a-icon @click="zjsDel(index)" type="minus-circle" :style="{marginLeft:'10px'}"/>
                  </div>
              </div>
              <a-button type="link" size="small" @click="zjzAdd" style="display: flex;justify-content: center;margin: 0 auto;"><a-icon type="plus-circle" />添加专家组</a-button>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}"  :md="{span:12}">
              <a-form-item label='联系人'>
               <a-input placeholder="请输入..." v-decorator="['lxr',{initialValue:postParams.lxr}]"/>
          </a-form-item>
          </a-col>
          <a-col :sm="{span:12}"  :md="{span:12}">
              <a-form-item label='联系方式'>
               <a-input placeholder="请输入..." v-decorator="['lxfs',{initialValue:postParams.lxfs}]"/>
          </a-form-item>
          </a-col>
       </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { STable } from '~'
import { mapState } from 'vuex'

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
export default {
  props: {
    planEditVisible: {
      default: false
    },
    info: {
      default: () => ({})
    },
    unList: {
      default: () => ({})
    }
  },
  components: {
    STable
  },
  beforeCreate(){
    this.form = this.$form.createForm(this)
  },
  data () {
    return {
      disabled:false,
      required: false,
      isShow: false,
      defaultOpenValue: moment('00:00', 'HH:mm'),
      mssjList:[{
        starOpen: false,
        endOpen: false
      }],
      bssjList:[],
      zjzList:[],
      formItemLayout,
      loading: false,
      postParams: {
         bssjdd: '',
        lxfs:'',
        lxr:'',
        mssjdd:'',
        zsyxm:'',
        zszym:''
      },
      selectMenu: {
        yx: [] ,// 院系
        zy:[]
      }
    }
  }, 
  watch: {
    info () {
      console.log(this.info)
      if(JSON.stringify(this.info) !== '{}'){
        this.postParams = this.info
        this.mssjList = this.postParams.ssfsfaxxmses.map((item) => {
          return {date: moment(item.date,'YYYY-MM-DD'),startTime: moment(item.startTime,'HH:mm:ss'),endTime: moment(item.endTime,'HH:mm:ss'),address:item.address,starOpen: false,endOpen: false}
        })
        this.bssjList = this.postParams.ssfsfaxxbses.map((item) => {
          return {date: moment(item.date,'YYYY-MM-DD'),startTime: moment(item.startTime,'HH:mm:ss'),endTime: moment(item.endTime,'HH:mm:ss'),address:item.address,starOpen: false,endOpen: false}
        })
        this.zjzList = this.postParams.msZjz
        this.getProssion(this.postParams.zsyxm)
      }else{
        this.postParams = this.unList
        this.disabled = true
      }
      
    },
    planEditVisible(value){
      if(value){
        this.postParams = this.unList
      }else{
        this.disabled = false
      }
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0126: state => state.app['TYPE0126'] // 年级
    })
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
      })
    },
    reset () {
    },
      // 选择院系
    yxChange (code) {
      this.$set(this.postParams, 'zszym', '')
      this.$set(this.selectMenu, 'zy', [])
      if(code){
        this.getProssion(code)
      }
    },
    getProssion(code){
       this.$api.base.majorAll({lsdwh: code}).then(res => {
        this.$set(this.selectMenu, 'zy', res.data)
      })
    },
    // 选择招生年度
    zsndChange () {

    },
    handleOpenChange(item){
      item.starOpen = !item.starOpen
    },
    handleClose(item){
      item.starOpen = false
    },
    handleOpenEnd(item){
      item.endOpen = !item.endOpen
    },
    handleEndClose(item){
      item.endOpen = false
    },
    //添加面试时间
    mssjAdd(){
      this.mssjList.push({
        starOpen: false,
        endOpen: false
      })
    },
    mssjDel(index){
      if(index != 0){
        this.mssjList.splice(index,1)
      }
    },
    bssjAdd(){
      this.bssjList.push({
        starOpen: false,
        endOpen: false
      })
    },
    bssjDel(index){
        this.bssjList.splice(index,1)
    },
    //添加专家组
    zjzAdd(){
      this.zjzList.push({
        total:''
      })
    },
    zjsDel(index){
        this.zjzList.splice(index,1)
    },
    bsChange(item){
      console.log(item,item.date)
      if(item.date){
        this.isShow = true
      }else{
        this.isShow = false
      }
    },
    // 关闭
    onClose () {
      this.reset()
      this.$emit('close')
    },
    // 保存
    handleSubmit () {
      let mssjShow = false
      let bssjShow = false
      let mssjList = this.mssjList.map((item,index) => {
        if(!item.date || !item.startTime || !item.endTime || !item.address){
          mssjShow = true
        }
        return {date: item.date.format('YYYY-MM-DD'),startTime: item.startTime.format('HH:mm:ss'),endTime: item.endTime.format('HH:mm:ss'),address: item.address}
      })
      let bssjList = this.bssjList.map((item,index) => {
        if(item && (!item.startTime || !item.endTime || !item.address)){
          bssjShow = true
        }
        return {date: item.date.format('YYYY-MM-DD'),startTime: item.startTime.format('HH:mm:ss'),endTime: item.endTime.format('HH:mm:ss'),address: item.address}
      })
      this.form.validateFields((err,values) => {
        if(err || mssjShow || bssjShow){
          this.$message.error('请选择必填项')
        }else{
          let msZjz = this.zjzList.map((item,index) => {
            return {sortBy: index,total: item.total}
          })
          var params = Object.assign({id: this.postParams.id,ssfsfaxxmses: mssjList,ssfsfaxxbses: bssjList,msZjz:msZjz},this.form.getFieldsValue(),)
          this.$api.recruitstat.reExamSchemeUpdate(params).then( res => {
             this.reset()
            this.$emit('success')
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .plan_title{
    background: #f8f8f8;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    p{
      margin: 0;
      width: 50%;
      color: #666;
      padding-left: 20px;
    }
  }
  .plan_item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .plan_item_con{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      width: 50%;
      padding-left: 20px;

    }
    .plan_item_con1{
      // display: flex;
      // // justify-content: space-between;
      // align-items: center;
      margin-bottom: 10px;
      width: 50%;
      margin-left: 20px;

    }
    
  }
</style>

